<template>
  <view class="page_view">
    <view class="back" @click="backTo">
      <view class="back-aim"> </view>
    </view>
    <!-- <view class="" v-if="userCodeStore == 1"> -->
    <view class="">
      <!-- <view class=""> -->
      <!-- 头部轮播背景 -->
      <view class="banner_box pr">
        <swiper
          style="height: 100%"
          :current="swiperIndex"
          @change="swiperChange"
        >
          <swiper-item v-for="(item, index) in bannerList" :key="index">
            <!--  <image
              src="https://ojqn.wm2177.com/wechat_imgs/merge/giff.gif"
              style="margin-left: 100rpx; margin-top: 150rpx"
            ></image> -->
            <!-- <view class="swiper-item">123</view> -->
            <!-- <img :src="item.img" class="swiper-item_banner" mode="" alt="" /> -->
            <image
              :src="item.compound_img"
              mode="heightFix"
              class="swiper-item_banner"
            ></image>
          </swiper-item>
        </swiper>

        <!-- 切换按钮 -->
        <!-- 左 -->
        <view class="banner_left_btn" @click="swiperSum">
          <img
            style="width: 59rpx; height: 55rpx"
            src="https://ojqn.wm2177.com/wechat_imgs/merge/left.png"
            alt=""
          />
        </view>
        <!-- 右 -->
        <view class="banner_right_btn" data-num="add" @click="swiperSum">
          <img
            style="width: 59rpx; height: 55rpx"
            src="https://ojqn.wm2177.com/wechat_imgs/merge/right.png"
            alt=""
          />
        </view>
        <!-- 底部显示 -->
        <view class="banner_title">
          <view class="t1">{{ bannerList[swiperIndex].goods_name }}</view>
          <view class="t2_box">
            <view class="t2_l">{{
              bannerList[swiperIndex].num > 0 * 1
                ? '剩余可合成' + bannerList[swiperIndex].leftNum + '次'
                : '无限制'
            }}</view>
            <view class="t2_z"></view>
            <view class="t2_l">库存：{{ bannerList[swiperIndex].kc }}</view>
            <!-- <view class="t2_z"></view> -->
            <!-- <view class="t2_r"
							>参考价：{{ bannerList[swiperIndex].price }}</view
						> -->
          </view>
        </view>

        <!-- 规则记录按钮 -->
        <view class="router_lib_box">
          <view class="router_lib" style="margin-top: 0" @click="showRuleClick"
            >规则</view
          >
          <view class="router_lib" @click="linkTo">记录</view>
        </view>

        <!-- 购买记录 -->
        <view class="record_list">
          <swiper
            class="record_list_box"
            display-multiple-items="0"
            :circular="true"
            :vertical="true"
            :autoplay="true"
            :interval="1000"
            :duration="1000"
          >
            <swiper-item v-for="(item, index) in logList" :key="index">
              <view class="record_item">
                <view class="t1">{{ item.nickname }}</view>
                <view class="t2">兑换了</view>
                <img
                  :src="item.goods_info.img"
                  alt=""
                  style="
                    width: 41rpx;
                    height: 41rpx;
                    border-radius: 50%;
                    margin-left: 15rpx;
                  "
                />
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>

      <!-- 轮播下的滑动栏 -->
      <view class="" style="position: relative">
        <scroll-view
          enable-flex="true"
          class="shop_list_box"
          scroll-x="true"
          :scroll-left="scrollLeft"
        >
          <view class="" style="display: flex; align-items: center">
            <view
              v-for="(item, index) in bannerList"
              :key="index"
              :class="{
                shop_list_item: true,
                shop_list_itemed: swiperIndex == index ? true : false,
              }"
              @click="shopItemClick(index)"
            >
              <img
                :src="item.compound_img"
                alt=""
                style="
                  width: 120rpx;
                  height: 120rpx;
                  margin: 8rpx auto 0;
                  display: block;
                "
              />
              <view v-if="swiperIndex == index" class="tips"></view>
            </view>
            <view style="width: 30rpx; height: 1rpx; flex-shrink: 0"></view>
          </view>
        </scroll-view>

        <!-- 全部轮播按钮 -->
        <view class="fiexd_all" @click="isShowAllShopClick">
          <view class="fiexd_t1">
            <view style="position: relative; top: -10rpx">全部</view>
            <view style="writing-mode: horizontal-tb">{{
              bannerList.length
            }}</view>
          </view>
          <img
            src="https://ojqn.wm2177.com/wechat_imgs/merge/more.png"
            alt=""
            class="fiexd_tip"
          />
        </view>
      </view>

      <!-- 合成选项 -->
      <view class="shop_foot">
        <view class="shop_title" style="">
          <view class="shop_foot_title1">合成进度</view>
          <view class="shop_foot_title1"
            >能量值：{{ Number(compound_energy).toFixed(0) }}</view
          >
        </view>
        <view class="progress_box" style="">
          <view class="progress-container">
            <view
              class="progress-bar"
              :style="'width:' + sumPercentage + '%;max-width:100%'"
            ></view>
          </view>
          <view class="progress-tip"
            >{{ sumPercentage > 100 ? 100 : sumPercentage }}%</view
          >
        </view>
        <view class="shop_foot_title2" v-if="bannerList.length">
          <view class="t1" style="font-size: 22rpx"
            >（合成所需
            <span style="color: #fc01ff">{{
              Number(bannerList[swiperIndex].sum).toFixed(0)
            }}</span>
            ，当前选择 <span>{{ (this.sumsShop || 0 * 1).toFixed(1) }}</span> ）
          </view>
          <view
            class="t1"
            style="
              color: red;
              font-size: 22rpx;
              padding-left: 10rpx;
              box-sizing: border-box;
            "
          >
            超出的合成数值将转为能量值，下次合成可直接使用
          </view>

          <view v-if="this.sumsShop > 0" class="btn1" @click="delSelect"
            >取消选择</view
          >
          <view v-else class="btn1" @click="addSelect">自动选择</view>
        </view>

        <scroll-view
          enable-flex="true"
          class="material_box"
          scroll-x="true"
          v-if="materialList.length > 0"
        >
          <view class="material_box">
            <view
              class="material_item"
              v-for="(item, index) in materialList"
              :key="index"
              @click="materialSum"
              @touchstart="touchStart"
              @touchend="touchEnd"
              @longtap="longSum"
              :data-index="index"
            >
              <view class="material_libs">
                <view
                  class="lib_left lib_style"
                  style="font-weight: bold"
                  @click.native.stop="materialDel"
                  :data-index="index"
                  >—</view
                >
                <view class="lib_num lib_style"
                  >{{ item.selectSum }}{{ materialList.le }}</view
                >
              </view>
              <img
                :src="item.img"
                alt=""
                style="
                  width: 145rpx;
                  height: 145rpx;
                  display: inline-block;
                  border-radius: 10rpx;
                "
              />

              <view class="material_sum">价值：{{ item.compound_price }}</view>
              <view class="material_goodsNum">x{{ item.goods_num }}</view>
            </view>
          </view>
        </scroll-view>
        <view
          v-else
          class=""
          style="
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #986ef5;
            text-align: center;
            margin: 53rpx auto 0;
          "
        >
          <img
            src="https://ojqn.wm2177.com/wechat_imgs/merge/box.png"
            alt=""
            style="
              width: 229rpx;
              height: 176rpx;
              display: block;
              margin: 0 auto;
            "
          />
          暂无普通款，快去收集吧
        </view>
      </view>

      <!-- 立即合成按钮 -->

      <uni-popup ref="promptpopup" type="center">
        <view class="sub_pop">
          <view
            class="sub_pop_header"
            :style="[{ height: isHeCheng ? '220rpx' : '88rpx' }]"
          >
          </view>
          <view class="image" style="margin-top: 40rpx">
            <img
              :src="bannerList[swiperIndex].compound_img"
              alt=""
              style="
                width: 210rpx;
                height: 210rpx;
                display: block;
                margin: 0 auto;
                border-radius: 12rpx;
              "
            />
          </view>
          <view class="enh sub_pop_t2">{{
            bannerList[swiperIndex].goods_name
          }}</view>

          <!-- <view
            class="pop_scroll_list"
            style="border-radius: 24rpx; overflow: auto"
            v-if="!isHeCheng"
          >
            <view class="pop_scroll_banner"> </view>
            <scroll-view class=" " scroll-y="true" style="height: 210rpx">
              <view
                class="pop_scroll_item"
                v-for="(item, index) in materialList"
                :key="index"
                :data-index="index"
                v-show="item.selectSum > 0"
              >
                <img
                  :src="item.img"
                  alt=""
                  style="width: 61rpx; height: 61rpx; border-radius: 8rpx"
                />
                <view
                  class="enh sub_pop_t3"
                  style="text-align: center; width: 280rpx"
                  >{{ item.goods_name }}</view
                >
                <view class="sub_pop_t3"
                  >X{{ item.selectSum }}</view
                >
              </view>
            </scroll-view>
          </view> -->

          <view class="pop_btn_box" v-if="!isHeCheng">
            <view
              class="pop_can pop_btn"
              @click="sub_close"
              style="
                background-image: url(https://ojqn.wm2177.com/wechat_imgs/merge/Cancel.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
              "
            ></view>
            <view class="pop_sun pop_btn" @click="sub_Post"></view>
          </view>
          <view class="pop_btn_box" v-if="isHeCheng">
            <view
              class="pop_can pop_btn"
              @click="sun_hide"
              style="
                background-image: url(https://ojqn.wm2177.com/wechat_imgs/merge/take.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin: 0 auto;
              "
            ></view>
          </view>
        </view>
      </uni-popup>

      <!-- 全部商品 -->
      <uni-popup ref="allgoodspopup" type="bottom">
        <view class="" style="background: #1a133f">
          <view class="pr pop_shop_title">
            <image
              class=""
              src="https://ojqn.wm2177.com/wechat_imgs/merge/all.png"
              style="width: 181rpx; height: 51rpx; margin: auto"
            ></image>
            <view class="pop_shop_title_c" @click="isShowAllShopClick"></view>
          </view>
          <scroll-view scroll-y="true" style="height: 1020rpx">
            <view class="shop_pop_list">
              <view
                class="shop_pop_item"
                v-for="(item, index) in bannerList"
                :key="index"
              >
                <img
                  :src="item.compound_img"
                  alt=""
                  style="
                    width: 316rpx;
                    height: 316rpx;
                    display: block;
                    margin: 20rpx auto;
                    border-radius: 14rpx;
                  "
                />
                <view class="shop_pop_item_t1">{{ item.goods_name }}</view>
                <view class="shop_pop_item_foot">
                  <view class="shop_pop_item_t3" @click="allShopBtn(index)"
                    >去合成</view
                  >
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </uni-popup>

      <!-- 合成规则 -->
      <uni-popup ref="rulepopup" type="bottom">
        <view class="" style="background: #1a133f">
          <view class="pr pop_shop_title">
            <image
              class=""
              src="https://ojqn.wm2177.com/wechat_imgs/merge/rule.png"
              style="width: 181rpx; height: 51rpx; margin: auto"
            ></image>
            <view class="pop_shop_title_c" @click="showRuleClick"></view>
            <!-- <view class="rule-content">
							<rich-text :nodes="ruleStrings"></rich-text>
						</view> -->
          </view>
          <scroll-view scroll-y="true" style="height: 70vh">
            <view
              style="
                width: 94%;
                margin: 0 auto;
                color: #aca1ea;
                padding-bottom: env(safe-area-inset-bottom);
              "
              class=""
            >
              <rich-text :nodes="ruleStrings"></rich-text>
            </view>
          </scroll-view>
        </view>
      </uni-popup>

      <view class="env_bar" style="height: 0rpx; display: inline-block"> </view>
      <!-- 合成按钮 -->
      <view class="dddddddddd">
        <view class="sub_btn" @tap.stop="sub_btn">立即合成</view>
        <view class="checked">
          <checkbox
            @tap.stop="changeAgree"
            style="transform: scale(0.8)"
            value="cb"
            :checked="agreeRule"
            activeBackgroundColor="#7863ff"
          />
          <view @click="showRuleClick">同意合成相关服务协议></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { http } from '@/utils/http.js'
  import { useUsercodeStore } from '@/store/usercode.js'

  export default {
    data() {
      return {
        compound_energy: 0, //能量值
        swiperIndex: 0, //索引
        isSub: false, //合成弹出
        isShowAllShop: false, //全部弹出
        bannerList: [{ goods_name: '' }], //轮播数据
        // sumPercentage: 0, //选中材料的百分比数值
        sumsShop: 0, //选中材料的数值
        logList: [], //曾经购买
        num100: '100',
        materialList: [], //我的材料
        background: {
          background: 'rgba(0,0,0,0)',
        },
        showRule: false, //副文本展示
        rulesData: '',
        top: 0,
        isHeCheng: false,
        agreeRule: true,
        timer: '',
        scrollLeft: 0,
        ruleStrings: '', //合成规则
        userCodeStore: '',
      }
    },
    computed: {
      sumPercentage() {
        let compoundenergy = Number(this.compound_energy)
        let sums =
          ((this.sumsShop * 1 + compoundenergy) /
            (this.bannerList[this.swiperIndex].sum * 1)) *
          100
        return Number(sums.toFixed(2))
      },
    },
    methods: {
      backTo() {
        uni.navigateBack({ delta: 1 })
      },
      changeAgree() {
        this.agreeRule = !this.agreeRule
      },
      // 点击了合成物品
      shopItemClick(index) {
        this.swiperIndex = index
      },
      // 轮播索引变化
      swiperChange(e) {
        let { current, source } = e.detail
        this.swiperIndex = current
        // this.delSelect()
      },
      //
      swiperSum(e) {
        let add = ''
        if (e.currentTarget && e.currentTarget.dataset.num) {
          add = true
        }
        if (add && this.swiperIndex < this.bannerList.length - 1) {
          this.swiperIndex = this.swiperIndex + 1
        } else if (!add && this.swiperIndex > 0) {
          this.swiperIndex = this.swiperIndex - 1
        }
      },
      showRuleClick() {
        this.showRule = !this.showRule
        if (this.showRule) {
          this.$refs.rulepopup.open('bottom')
        } else {
          this.$refs.rulepopup.close('bottom')
        }
      },
      handleHome() {
        uni.reLaunch({
          url: '/pages/home/home',
        })
      },
      // 获取轮播奖品数据
      async getPageData() {
        let res = await http.request({
          url: '/api/compound/compoundList',
          method: 'POST',
          data: {},
        })
        if (res.st == 1) {
          this.bannerList = res.data.goods
          this.logList = res.data.log
          // console.log(this.logList,'77777777777777777777777777777')
        }
      },
      // 获取我的材料
      async getMaterialList() {
        let res = await http.request({
          url: '/api/compound/materialList',
          method: 'POST',
          data: {
            page: 1,
            limit: 50,
          },
        })
        if (res.st == 1) {
          for (let index = 0; index < res.data.length; index++) {
            res.data[index]['selectSum'] = 0
          }
          this.compound_energy = res.compound_energy
          this.materialList = res.data.sort((a, b) => {
            return a.compound_price - b.compound_price
          })
          console.log(this.materialList, 'this.materialListthis.materialList')
        }
      },
      sub_btn() {
        if (!this.agreeRule) {
          uni.utils.toast('请同意相关协议')
          return
        }
        let compoundenergy = Number(this.compound_energy)
        if (
          this.sumsShop * 1 + compoundenergy <
          this.bannerList[this.swiperIndex].sum * 1
        ) {
          uni.utils.toast('合成进度未到达100%')
          return
        }
        this.$refs.promptpopup.open('center')
        this.isHeCheng = false
      },
      sub_close() {
        this.$refs.promptpopup.close('center')
      },
      sun_hide() {
        this.$refs.promptpopup.close('center')
        this.isHeCheng = false
      },
      // 更改合成材料
      materialSum(e) {
        let index
        if (e.currentTarget) {
          index = e.currentTarget.dataset.index
        } else {
          index = e
        }
        let data = this.materialList[index]
        // console.log(this.sumsShop)
        if (data.is_compound != '1') {
          uni.showToast({
            title: '该材料不能参与合成',
            icon: 'none',
          })
          return
        }
        // if (
        //   this.sumsShop + data.compound_price * 1 >=
        //   this.bannerList[this.swiperIndex].sum * 1.05
        // ) {
        //   uni.showToast({
        //     title:
        //       '当前商品勾选后会超出合成所需材料，请重新选择数量或选择其他商品。',
        //     icon: 'none',
        //   })
        //   return
        // }
        let compoundenergy = Number(this.compound_energy)
        if (
          this.sumsShop * 1 + compoundenergy >=
          this.bannerList[this.swiperIndex].sum * 1
        ) {
          uni.showToast({
            title: '合成进度已到达100%',
            icon: 'none',
          })
          return
        }

        if (data.selectSum < data.goods_num) {
          data.selectSum = data.selectSum * 1 + 1
          this.sumsShop = data.compound_price * 1 + this.sumsShop * 1
        }
        // this.upSelect()
        // e.stopPropagation()
      },
      touchStart(e) {
        this.timer = setInterval(() => {
          this.materialSum(e.currentTarget.dataset.index)
        }, 100)
      },
      touchEnd() {
        clearInterval(this.timer)
      },
      longSum(e) {
        let index = e.currentTarget.dataset.index
        console.log(index)
      },
      materialDel(e) {
        let index = e.currentTarget.dataset.index
        if (!this.materialList[index].selectSum) {
          return
        }
        if (this.materialList[index].selectSum > 0) {
          this.materialList[index].selectSum =
            this.materialList[index].selectSum * 1 - 1
          this.sumsShop =
            this.sumsShop * 1 - this.materialList[index].compound_price * 1
        }
        // this.upSelect()
        e.stopPropagation()
      },
      delSelect() {
        for (let index = 0; index < this.materialList.length; index++) {
          this.materialList[index].selectSum = 0
        }
        // this.sumPercentage = 0
        this.sumsShop = 0
        this.upSelect()
      },
      addSelect() {
        let bannerNum =
          this.bannerList[this.swiperIndex].sum * 1 - this.compound_energy
        let needPrice = 0
        if (bannerNum < 0 || bannerNum == 0) {
          uni.utils.toast('能量值充足无需选择材料')
        } else {
          needPrice = bannerNum //needPrice =<0 结束
          // compound_price
          const arr = this.materialList
          this.materialList = arr.map((res) => {
            let selectSum = 0
            if (needPrice > 0) {
              // console.log(needPrice < res.compound_price)
              // console.log(needPrice, res.compound_price)
              if (needPrice < res.compound_price) {
                selectSum = 1
                needPrice = 0
              } else {
                // 判断最后一个是否总价值够
                const topOrbottom =
                  res.compound_price * res.goods_num > needPrice
                const num = topOrbottom
                  ? Math.ceil(needPrice / res.compound_price)
                  : Math.floor(needPrice / res.compound_price)
                const delPrice =
                  (num > res.goods_num ? res.goods_num : num) *
                  res.compound_price
                needPrice = needPrice - delPrice
                selectSum = num > res.goods_num ? res.goods_num : num
              }
            }
            this.sumsShop = selectSum * res.compound_price * 1 + this.sumsShop
            // console.log(needPrice)
            return Object.assign({}, res, {
              selectSum: selectSum,
            })
          })
          this.$forceUpdate()
          console.log(this.materialList)
        }
      },
      // addSelect2() {
      //   uni.utils.toast('已自动选择兑换商品，请自行核对、调整商品数量。')
      //   for (let index = 0; index < this.materialList.length; index++) {
      //     if (this.sumsShop * 1 >= this.bannerList[this.swiperIndex].sum * 1) {
      //       console.log('zje')
      //       // this.upSelect()
      //       return
      //     }

      //     // 如果现在总价大于需要价格变成负数
      //     //并且所选价格总额不能大于105%
      //     // if (
      //     //   this.bannerList[this.swiperIndex].sum * 1 * 1.05 - this.sumsShop <
      //     //   0
      //     // ) {
      //     //   return
      //     // }
      //     // if (
      //     //   this.sumsShop + this.materialList[index].compound_price * 1 >=
      //     //   this.bannerList[this.swiperIndex].sum * 1.05
      //     // ) {
      //     //   continue
      //     // }
      //     //负数这边出现的
      //     //所需个数（向下取整）
      //     let needSum = Math.floor(
      //       (this.bannerList[this.swiperIndex].sum * 1 -
      //         this.sumsShop -
      //         this.compound_energy) /
      //         (this.materialList[index].compound_price * 1)
      //     )

      //     if (
      //       parseInt(
      //         ((this.bannerList[this.swiperIndex].sum * 1.05 - this.sumsShop) /
      //           this.materialList[index].compound_price) *
      //           1
      //       ) >
      //       this.materialList[index].goods_num * 1
      //     ) {
      //       this.materialList[index].selectSum =
      //         this.materialList[index].goods_num * 1
      //       this.sumsShop =
      //         this.materialList[index].selectSum *
      //           (this.materialList[index].compound_price * 1) +
      //         this.sumsShop
      //     } else {
      //       // 商品数值小(向下取整),如果加不大于设置数额+1
      //       //已经>100%不需要+1
      //       if (
      //         this.materialList[index].compound_price * (needSum + 1) +
      //           this.sumsShop <=
      //           this.bannerList[this.swiperIndex].sum * 1.05 &&
      //         this.materialList[index].compound_price * needSum +
      //           this.sumsShop <
      //           this.bannerList[this.swiperIndex].sum
      //       ) {
      //         ++needSum
      //       }
      //       this.materialList[index].selectSum = needSum
      //       this.sumsShop =
      //         this.materialList[index].selectSum *
      //           1 *
      //           (this.materialList[index].compound_price * 1) +
      //         this.sumsShop
      //     }
      //     this.upSelect()
      //   }
      // },
      upSelect() {
        this.materialList = this.materialList.map((res) => {
          return Object.assign({}, res, {
            selectSum: 0,
          })
        })
        this.sumsShop = 0
        // console.log(sums)
        // this.sumPercentage = Number(sums.toFixed(2))
      },
      // 提交合成材料
      async sub_Post() {
        let goods_data = []
        if (this.bannerList[this.swiperIndex].kc <= '0' * 1) {
          uni.utils.toast('库存不足，无法继续合成')
          return
        }
        if (
          this.bannerList[this.swiperIndex].num > 0 &&
          this.bannerList[this.swiperIndex].leftNum == '0'
        ) {
          uni.utils.toast('可合成次数不够啦，无法合成')
          return
        }
        for (let index = 0; index < this.materialList.length; index++) {
          if (this.materialList[index].selectSum > 0) {
            goods_data.push({
              goods_id: this.materialList[index].goods_id,
              num: this.materialList[index].selectSum,
            })
          }
        }
        let data = {
          id: this.bannerList[this.swiperIndex].id,
          goods_data: goods_data,
        }
        let res = await http.request({
          url: '/api/compound/compoundPost',
          method: 'POST',
          data,
        })
        if (res.st == 1) {
          this.isHeCheng = true
          uni.utils.toast(res.msg)
          // this.sumPercentage = 0
          // this.sub_btn()
          this.getPageData()
          this.getMaterialList()
          this.delSelect()
        } else {
          uni.utils.toast(res.msg)
        }
      },

      // 全部显示被点击
      isShowAllShopClick() {
        this.isShowAllShop = !this.isShowAllShop
        if (this.isShowAllShop) {
          this.$refs.allgoodspopup.open('bottom')
        } else {
          this.$refs.allgoodspopup.close('bottom')
        }
      },
      allShopBtn(index) {
        this.scrollLeft = index * 76
        this.isShowAllShopClick()
        this.swiperIndex = index
      },

      linkTo() {
        uni.navigateTo({
          url: '/mergePage/mergelog/index',
        })
      },
      handleBack() {
        uni.navigateBack()
      },
      // 规则
      // async getRulesContent() {
      // 	let data = {
      // 		id: '33',
      // 	}
      // 	let res = await http.request({ url: 'api/getData', data })
      // 	if (res.st == 1) {
      // 		this.rulesData = res.data.details
      // 	}
      // },
      async getRules(id) {
        let res = await http.request({
          url: '/api/index/getDetails',
          method: 'POST',
          data: {
            id: id,
          },
        })
        this.ruleStrings = res.data.details
      },
    },
    onShareAppMessage() {
      const userCodeStore = useUsercodeStore()
      const user = userCodeStore.usercode.user
      return {
        title: '奖品进阶，快乐翻倍',
        path: `/pages/home/index?pid=${user}`,
      }
    },
    onLoad(option) {
      this.userCodeStore = useUsercodeStore().usercode.isTrans
      console.log(this.userCodeStore)
      this.getPageData()
      this.getMaterialList()
      // this.getRulesContent()
      this.getRules(1)
      // let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      // this.navHeight = menuButtonInfo.height
      // this.top = menuButtonInfo.top
    },
  }
</script>

<style>
  page {
    background-color: #1a133f;
  }

  .back {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 26rpx;
    top: 88rpx;
    z-index: 999;
    width: 56rpx;
    height: 56rpx;
    border-radius: 28rpx;
    background-color: rgba(7, 1, 53, 0.5);
  }
  .back-aim {
    width: 18rpx;
    height: 18rpx;
    border-top: 4rpx solid #fff;
    border-left: 4rpx solid #fff;
    transform: rotate(-45deg);
  }

  .page_view {
    display: flex;
    flex-direction: column;
    background-color: #1a133f;
    font-family: OPPOSans;
  }

  .banner_box {
    background: url('https://ojqn.wm2177.com/wechat_imgs/merge/head.png')
      no-repeat;
    background-size: 100%;
    height: 752rpx;
    position: relative;
  }

  .banner_left_btn {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 42rpx;
    height: 37rpx;
    box-sizing: content-box;
    padding: 31rpx;
  }

  .banner_right_btn {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    width: 42rpx;
    padding: 31rpx;
    height: 37rpx;
    box-sizing: content-box;
  }

  .banner_title {
    /* height: 91rpx; */
    /* background-color: rgba(0,0,0,0.6); */
    color: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
  }

  .banner_title .t1 {
    font-family: OPPOSans;
    font-weight: bold;
    font-size: 30rpx;
    color: #fff;
    line-height: 30rpx;
    height: 30rpx;
    width: 550rpx;
    margin: 21rpx auto 20rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
  }

  .banner_title .t2_box {
    display: flex;
    justify-content: space-between;
    width: 500rpx;
    margin: 0 auto;
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 22rpx;
    line-height: 22rpx;
  }

  .t2_box .t2_z {
    width: 1rpx;
    background-color: #fff;
    height: 22rpx;
  }

  .swiper-item_banner {
    /* width: 371rpx; */
    height: 480rpx;
    display: block;
    margin: 0 auto;
    position: absolute;
    bottom: 103rpx;
    left: 0;
    right: 0;
  }

  /* 轮播下的滑动框 */
  .shop_list_box {
    /* width: 100%; */
    height: 200rpx;
    padding: 0rpx 100rpx 0rpx 0rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  .shop_list_item {
    /* background: url('https://ojqn.wm2177.com/wechat_imgs/merge/img-border.png')
      no-repeat;
    background-size: 100%; */
    width: 137rpx;
    height: 137rpx;
    /* box-sizing: ; */
    margin-left: 15rpx;
    flex-shrink: 0;
    display: inline-flex;
    position: relative;
    border: 4rpx solid #6d6c6e;
    border-radius: 12rpx;
    background-color: rgba(255, 255, 255, 0.1); /* 半透明背景 */
    backdrop-filter: blur(10px); /* 背景模糊 */
    -webkit-backdrop-filter: blur(10px); /* 兼容老版本 Safari */
    box-shadow: inset 10rpx 0 10px #40397f, inset 0 0 10px #40397f;
    /* 36rpx */
  }
  .shop_list_itemed {
    border: 4rpx solid #956af5;
  }

  .shop_list_item:nth-child(1) {
    margin-left: 30rpx;
  }

  .shop_list_item:last-child {
    margin-right: 30rpx;
  }

  .shop_list_item .tips {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -36rpx;
    width: 0rpx;
    height: 0rpx;
    margin: 0 auto;
    border-style: solid;
    border-width: 18rpx;
    border-color: transparent transparent #432092 transparent;
  }

  .shop_list_item_title {
    width: 100%;
    height: 29rpx;
    position: absolute;
    bottom: 0;
    background: #f7d5b5;
    text-align: center;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
    font-weight: 500;
    font-size: 20rpx;
    color: #000000;
  }

  /* 轮滑下边的框 */
  .shop_foot {
    width: 690rpx;
    /* height: 456rpx; */
    background: linear-gradient(0deg, #1a133f, #462198);
    border-radius: 19rpx;
    margin: 0 auto;
    padding-bottom: 20rpx;
  }
  .shop_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .shop_foot_title1 {
    padding: 20rpx 25rpx;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 28rpx;
    color: #fff;
    line-height: 28rpx;
  }
  .progress_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10rpx;
    box-sizing: border-box;
  }
  .progress-container {
    width: 588rpx;
    height: 15rpx;
    background: #2b2355;
    border-radius: 8rpx;
    position: relative;
  }

  .progress-bar {
    height: 15rpx;
    background-color: #db53ee;
    /* background: url("https://ojqn.wm2177.com/wechat_imgs/merge/gif.gif") no-repeat; */
    /* background-image: 100%; */
    transition: width 1s ease-in-out;
    border-radius: 8rpx;
    width: 0;
    /* 默认情况下进度条为0 */
  }

  .progress-tip {
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 24rpx;
    color: #fff;
    line-height: 24rpx;
    /*  position: absolute;
    right: 4rpx;
    top: -34rpx; */
  }

  .shop_foot_title2 {
    /* display: flex; */
    justify-content: space-between;
    align-items: center;
    margin-top: 19rpx;
    margin-bottom: 40rpx;
    position: relative;
  }

  .shop_foot_title2 .t1 {
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #fff;
    line-height: 28rpx;
    margin-left: 25rpx;
  }

  .shop_foot_title2 .btn1 {
    font-weight: 500;
    font-size: 22rpx;
    color: #fff;
    line-height: 49rpx;
    width: 112rpx;
    background: linear-gradient(0deg, #e06df0, #d538ec);
    box-shadow: 2rpx 3rpx 3rpx 0rpx rgba(139, 72, 11, 0.54);
    border-radius: 24rpx 0rpx 0rpx 24rpx;
    opacity: 0.97;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
  }

  .material_box {
    height: 100%;
    width: 100%;
    /* padding-top: 20rpx; */
    height: 170rpx;
    /* 
		flex-shrink: 0; */
    display: flex;
    /* align-items: center; */
  }

  .material_item {
    width: 145rpx;
    height: 170rpx;
    margin-right: 31rpx;
    position: relative;
    /* box-sizing: border-box; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* background-color: #fff; */
    border-radius: 10rpx;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
  }

  .material_item:nth-child(1) {
    margin-left: 22rpx;
  }

  .material_libs {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
  }

  .lib_style {
    font-weight: bold;
    font-size: 22rpx;
    color: #090401;
    line-height: 38rpx;
    width: 38rpx;
    background: linear-gradient(0deg, #b392fc, #b392fc);
    border-radius: 50%;
    text-align: center;
    /* margin-top: -8rpx; */
  }

  .lib_left {
    margin-left: -12rpx;
  }

  .lib_num {
    margin-right: -12rpx;
  }
  .material_goodsNum {
    width: 100%;
    line-height: 31rpx;
    position: absolute;
    top: 0rpx;
    font-family: OPPOSans;
    font-weight: bold;
    font-size: 20rpx;
    color: #ffffff;
    text-align: center;
  }
  .material_sum {
    background: #7e56d4;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
    width: 100%;
    line-height: 31rpx;
    position: absolute;
    bottom: 0;
    font-family: OPPOSans;
    font-weight: bold;
    font-size: 20rpx;
    color: #1a133f;
    text-align: center;
  }

  .sub_btn {
    width: 690rpx;
    height: 109rpx;
    /* z-index: 2;
		position: fixed;
		bottom: 25; */
    /* background: linear-gradient(0deg, #ECBF8E, #E9B98D, #F7E4D3); */
    background: url('https://ojqn.wm2177.com/wechat_imgs/merge/start-btn.png')
      no-repeat;
    background-size: 100%;
    /* border-radius: 45rpx; */
    text-align: center;
    font-family: OPPOSans;
    font-weight: 800;
    font-size: 38rpx;

    color: #9146a0;
    padding-top: 20rpx;
    margin-top: 52rpx;
    margin-left: 30rpx;
    /* margin:  80rpx 30rpx auto; */
  }

  .checked {
    positon: fixed;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
  }

  .checked view {
    font-size: 20rpx;
    color: #fff;
  }
  ::v-deep .checked uni-checkbox .uni-checkbox-input {
    border-radius: 50% !important;
  }

  .env_bar {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .router_lib_box {
    position: absolute;
    right: 0rpx;
    top: 200rpx;
  }

  .router_lib {
    background: linear-gradient(0deg, #6639ce, #714fb4);
    border-radius: 40rpx;
    line-height: 50rpx;
    width: 107rpx;
    height: 50rpx;
    text-align: center;
    box-sizing: content-box;
    margin: 20rpx 30rpx;
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 24rpx;
    color: #fff;
  }

  .record_list {
    width: 212rpx;
    height: 120rpx;
    display: flex;
    font-display: colum;
    overflow: hidden;
    position: absolute;
    bottom: 183rpx;
    left: 31rpx;
  }

  .record_list_box {
    width: 212rpx;
    height: 120rpx;
    display: flex;
    font-display: colum;
    /* overflow: hidden; */
  }

  .record_item {
    width: 100%;
    height: 51rpx;
    line-height: 51rpx;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 25rpx;
    /* border: 1px solid #F5DFCB; */
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 20rpx;
    color: #fff;
  }

  .record_item .t1 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 60rpx;
    margin-left: 31rpx;
  }

  .sub_pop {
    /* background: #FBF1E9; */
    background: url('https://ojqn.wm2177.com/wechat_imgs/merge/sub_pop.png')
      no-repeat;
    background-size: 100%;
    /* border-radius: 38rpx 38rpx 30rpx 30rpx; */
    width: 750rpx;
    height: 931rpx;
    margin: 0 auto;
    padding-bottom: 35rpx;
  }

  .sub_pop_header {
    text-align: center;
    font-family: OPPOSans;
    font-weight: bold;
    font-size: 38rpx;
    color: linear-gradient(to bottom, #f9ece0, #ebbb8d);
    text-shadow: 0rpx 5rpx 7rpx rgba(16, 16, 16, 0.28);
    /* background: linear-gradient(0deg, #F9ECE0 0%, #EBBB8D 100%); */
    position: relative;
    width: 313rpx;
    height: 88rpx;
    /* background-image: url(https://cc.wm2177.com/wechat_img/blackgold/hecheng/success.png); */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 auto 23rpx;
  }

  .sub_pop_t2 {
    width: 480rpx;
    font-family: OPPOSans;
    font-weight: bold;
    font-size: 30rpx;
    color: #292a2a;
    line-height: 30rpx;
    margin: 28rpx auto 20rpx;
    text-align: center;
  }

  .sub_pop_t3 {
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
  }

  .pop_scroll_list {
    width: 510rpx;
    height: 280rpx;
    margin: 0 auto;
  }

  .pop_scroll_banner {
    width: 226rpx;
    height: 67rpx;
    line-height: 40rpx;
    font-family: OPPOSans;
    font-weight: bold;
    font-size: 24rpx;
    color: linear-gradient(to bottom, #f9ece0, #ebbb8d);
    margin-bottom: 10rpx;
    text-shadow: 0rpx 5rpx 7rpx rgba(16, 16, 16, 0.28);
    margin: 0 auto;
    text-align: center;
    position: relative;
    background-image: url(https://ojqn.wm2177.com/wechat_imgs/merge/now.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .pop_scroll_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 18rpx;
    padding-right: 14rpx;
    border-bottom: 2rpx dashed rgba(55, 55, 55, 0.3);
    margin-top: 10rpx;
    padding-bottom: 10rpx;
  }

  .pop_scroll_item:nth-child(1) {
    margin-top: 0;
  }

  .pop_scroll_item:last-child {
    border-bottom: none;
  }

  .pop_btn_box {
    padding-left: 120rpx;
    padding-right: 120rpx;
    display: flex;
    justify-content: space-between;
    margin-top: 31rpx;
    /* height: 76rpx; */
  }

  .pop_btn {
    width: 244rpx;
    line-height: 83rpx;
    height: 83rpx;
    flex-shrink: 0;
    border-radius: 12rpx;
    background-image: url(https://ojqn.wm2177.com/wechat_imgs/merge/Confirm.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .pop_shop_title {
    /* font-family: PingFang SC; */
    /* font-weight: bold; */
    /* font-size: 41rpx; */
    /* color: #FFFFFF; */
    line-height: 100rpx;
    /* background:url(https://ojqn.wm2177.com/wechat_imgs/merge/all.png); */
    /* margin-left: 260rpx; */
    width: 100%;
    height: 51rpx;
    /* 	background: linear-gradient(0deg, #F7E4D3 0%, #E9B98D 46.484375%, #ECBF8E 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent; */
    text-align: center;
    padding-top: 32rpx;
    padding-bottom: 90rpx;
  }

  .pop_shop_title_c {
    position: absolute;
    top: 29rpx;
    line-height: 31rpx;
    right: 29rpx;
    font-size: 41rpx;
    /* color: #FFFFFF; */
    /* background: linear-gradient(0deg, #F7E4D3 0%, #E9B98D 46.484375%, #ECBF8E 100%); */
    background: url(https://ojqn.wm2177.com/wechat_imgs/merge/close.png);
    width: 51rpx;
    height: 46rpx;
    background-size: 100% 100%;
  }

  .shop_pop_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 15rpx;
  }

  .shop_pop_item {
    background: #2a2254;
    width: 356rpx;
    /* height: 468rpx; */
    margin-bottom: 50rpx;
    border-radius: 11rpx;
  }

  .shop_pop_item_t1 {
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 26rpx;
    color: #ffffff;
    width: 320rpx;
    height: 70rpx;

    margin-top: 30rpx;
    margin-left: 30rpx;
    margin-bottom: 24rpx;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .shop_pop_item_foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .shop_pop_item_t2 {
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 26rpx;
    color: #f7d5b5;
  }

  .shop_pop_item_t3 {
    margin-left: 30rpx;
    margin-bottom: 24rpx;
    width: 119rpx;
    line-height: 46rpx;
    text-align: center;
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 24rpx;
    color: #7f66b8;
    background: linear-gradient(0deg, #2a2254, #2a2254);
    border: 1rpx solid #7f66b8;
    border-radius: 23rpx;
  }

  .fiexd_all {
    width: 100rpx;
    height: 140rpx;
    padding: 10rpx 0;
    /* background: linear-gradient(0deg, #ECBF8E, #E9B98D, #F7E4D3); */
    background-color: #271f53;
    border-radius: 15rpx 0rpx 0rpx 15rpx;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    position: absolute;
    top: 18rpx;
    right: 0;
  }

  .fiexd_t1 {
    margin-left: 20rpx;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 26rpx;
    color: #aca1ea;
    writing-mode: vertical-rl;
    padding-left: 8rpx;
    /* margin-left:20rpx; */
    margin-right: 6rpx;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-align: center;
    width: 40rpx;
    /* flex-direction: column; */
  }

  .fiexd_t1 view {
    /* width: 40rpx; */
    font-size: 26rpx;
    text-align: center;
    /* line-height: 40rpx; */
    white-space: nowrap;
  }

  .fiexd_tip {
    width: 18rpx;
    height: 20rpx;
    /* margin-right: -7rpx; */
  }

  .enh {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .homeicon {
    width: 37rpx;
    height: 37rpx;
  }

  .dddddddddd {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    bottom: 0;
    z-index: 1;
    background: url(https://ojqn.wm2177.com/wechat_imgs/merge/tab.png);
    background-size: 100%;
    width: 750rpx;
    height: 262rpx;
  }
</style>
